<template>
    <view class="gjl-view">
        <view class="main">
            <view class="card">
                <view class="cover-img">
                    <image src="https://img.thumbrary.com/my-copartner.png" mode=""></image>
                </view>
                <view class="card-inner">
                    <view class="top-box">
                        <view class="text">
                            成功招募人数
                        </view>
                        <view class="num">
                            <text class="big">{{yongjinData.hehuoren}}</text>人
                        </view>
                    </view>
                    <view class="bottom-btn" @click="$routerTo({path:'/pagesMine/copartner/downLoad',query:{index:4}})">
                        去招募
                    </view>
                </view>
            </view>
            <view class="main-center">
                <gwTabs @tabChange="tabChange" padding="0" :tabsTitle="tabsTitle" justifyContent="space-around" lineHeight="6rpx" :type="1" width="100%"></gwTabs>
                <view class="commission-box">
                    <view class="commission-ul">
                        <view class="commission-li" v-for="(item,index) in yongjinData.list" :key="index">
                            <view class="left">
                                <view class="header-img">
                                    <image :src="item.avatarUrl" mode=""></image>
                                </view>
                                <view class="name-box">
                                    <view class="name">
                                        {{item.nickName}}
                                    </view>
                                    <view class="type">
                                        ID:{{item.memberId}}
                                    </view>
                                </view>
                            </view>
                            <view class="right">
                                <view class="num">
                                    当前佣金率：<text class="red">13%</text>
                                </view>
                                <view class="time">
                                    加入时间：{{item.bangDingShareAddTime | format('yy-m-d H:i:s')}}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import gwTabs from '@/pages/components/gw-card-tabs.vue'
    import service from "@/service"
    import utils from '@/util/index.js'
    export default {
        components: {
            gwTabs
        },
        filters:{
            format(val,format){
                return utils.format(val,format)
            }
        },
        data() {
            return {
                tabsTitle: [{
                    name: '一级合伙人',
                    type: 1
                },
                {
                    name: '二级合伙人',
                    type: 2
                }],
                yongjinData: {},
                listQuery: {
                    page: 1,
                    limit: 10,
                    type: 1
                }
            }
        },
        mounted(){
            this.PartnershipHehuoren()
        },
        onReachBottom(){
            this.PartnershipHehuoren();
        },
        methods:{
            // 获取我的合伙人列表
            PartnershipHehuoren(){
                service.mineService.PartnershipHehuoren({
                    data: {...this.listQuery},
                    success: res => {
                        let list = res.result.list;
                        if(this.listQuery.page == 1){
                            this.yongjinData = res.result;
                        }else{
                            this.yongjinData.list = this.yongjinData.list.concat(list);
                        }
                        if(list.length > 0){
                            this.listQuery.page++;
                        }
                    },
                    fail: ()=>{
                        
                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            tabChange(item){
                this.listQuery.type = item.type;
                this.listQuery.page = 1;
                this.PartnershipHehuoren();
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-view {
        min-height: 100%;
        overflow: hidden;
        background:rgba(249,249,249,1);
        .main {
            margin: 20rpx 30rpx 0;
            .main-center{
                margin-top: 20rpx;
                padding: 40rpx 20rpx 59rpx;
                background:rgba(255,255,255,1);
                border-radius:10rpx;
                .commission-box {
                    .commission-ul {
                        margin-top: 42rpx;
                        .commission-li+.commission-li {
                            margin-top: 14rpx;
                        }
                
                        .commission-li {
                            padding-bottom: 16rpx;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            border-bottom: 1px solid rgba(229, 229, 229, 1);
                
                            .left {
                                display: flex;
                                align-items: center;
                                .header-img{
                                    width:98rpx;
                                    height:98rpx;
                                    image{
                                        height: 100%;
                                        width: 100%;
                                        background:rgba(225,225,225,1);
                                        border-radius:50%;
                                    }
                                }
                                .name-box{
                                    margin-left: 20rpx;
                                    .name {
                                        font-size: 28rpx;
                                        font-weight: 400;
                                        color: #333333;
                                    }
                                                    
                                    .type {
                                        margin-top: 5rpx;
                                        font-size: 24rpx;
                                        font-weight: 400;
                                        color:rgba(102,102,102,1);
                                    }
                                }
                            }
                
                            .right {
                                text-align: right;
                                .num {
                                    opacity: 0;
                                    font-size: 28rpx;
                                    font-weight: bold;
                                    color: #333333;
                                    .red{
                                        color: #F82432;
                                    }
                                }
                
                                .time {
                                    margin-top: 5rpx;
                                    font-size: 24rpx;
                                    font-weight: 400;
                                    color:rgba(102,102,102,1);
                                }
                            }
                        }
                    }
                }
            }
            .card {
                position: relative;
                height: 279rpx;
                width: 100%;

                .cover-img {
                    z-index: 1;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;

                    image {
                        height: 100%;
                        width: 100%;
                        border-radius: 10rpx;
                    }
                }

                .card-inner {
                    z-index: 2;
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;

                    .top-box {
                        margin-left: 85rpx;
                        margin-top: 67rpx;

                        .text {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: rgba(255, 255, 255, 1);
                        }

                        .num {
                            font-size: 24rpx;
                            font-weight: bold;
                            color: rgba(255, 255, 255, 1);

                            .big {
                                font-size: 48rpx;
                            }
                        }
                    }

                    .bottom-btn {
                        display: inline-block;
                        margin-left: 60rpx;
                        margin-top: 19rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(46, 92, 240, 1);
                        padding: 12rpx 58rpx;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 50px;
                    }
                }

            }
        }
    }
</style>
